<template>
  <!-- 全局配置 -->
  <n-config-provider :theme="theme" :locale="locale" :date-locale="dateLocale" style="height: 100vh;width: 100vw;">

    <!-- 加载条 -->
    <n-loading-bar-provider>

      <!-- 信息框 -->
      <n-message-provider :placement="placement">

        <!-- 页面 -->
        <n-layout style="height: 100vh;width: 100vw;min-height: 600px;min-width: 800;">

          <!-- 加载 -->
          <n-spin size="large" :show="useSystemConfig.load" :description="useSystemConfig.loadDescription" :stroke="useSystemConfig.loadStroke">

            <!-- 导航 -->
            <n-layout-header style="width: 100vw;height: 80px;min-height: 80px;">
              <Navbar />
            </n-layout-header>

            <!-- 路由 -->
            <n-layout has-sider style="width: 100vw;height: calc(100vh - 80px);min-height:(100vh - 80px);">
              <router-view />
            </n-layout>

            <!-- 播放控制器 -->
            <PlayControl />

          </n-spin>

        </n-layout>

      </n-message-provider>

    </n-loading-bar-provider>

  </n-config-provider>
</template>

<script setup lang="ts">
import type { MessageProviderProps, NLocale, NDateLocale, GlobalTheme } from 'naive-ui'
import { computed, ref, getCurrentInstance, onUnmounted } from 'vue'
import { useRouter } from "vue-router";
import { zhCN, dateZhCN, darkTheme } from 'naive-ui'
import { useSystemConfigStore } from './store'
import Navbar from './components/Nav/Navbar.vue'
import PlayControl from './components/PlayControl/PlayControl.vue'


onUnmounted(() => {
  instance?.proxy?.$Bus.off("changeTheme")
})

const router = useRouter()
const instance = getCurrentInstance()
const useSystemConfig = useSystemConfigStore()
const locale = ref<NLocale | null>(zhCN)
const dateLocale = ref<NDateLocale | null>(dateZhCN)

// 主题切换监听
instance?.proxy?.$Bus.on("changeTheme", function (params: any) {
  useSystemConfig.changeTheme(params.theme)
})


// electron 不会主动前往'/'，需要手动指向路由
router.push({ name: `${useSystemConfig.page}` })


// 全局信息框的位置
const placement = ref<MessageProviderProps['placement']>('top-right')
// 全局皮肤
const theme = computed((): GlobalTheme | null => {
  if (useSystemConfig.theme == "null") {
    return null
  } else {
    return darkTheme
  }
})

</script>

